<template>
	<view class="progress_con">
		<view class="progress">
		  <view class="progress-bar" :style="{width: progress + '%'}"></view>
		</view>
		<text class="text_pencent">{{progress + '%'}}</text>
	</view>
 
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style>
	.progress_con{
		width: 100%;
		display: flex;
		align-items: center;
	}
.progress {
  width: 75%;
  height: 10px;
 background-color: #f0f0f0;
 border-radius: 1vh;
}

.progress-bar {
  height: 100%;
  background-color: #0aa1ed;
  border-radius: 1vh;
}
.text_pencent{
	font-size: 0.7rem;
	margin-left: 1vw;
}
</style>